window.addEventListener('load',function(){
    let tbody = this.document.querySelector('tbody')
    //1 渲染
    function init(){
        axios({
            url:'/score/list',
        })
        .then(res=>{
            let data = res.data.data
            // console.log(data);
            // 进行数据的拼接
            let htmlStr = ''
         //1.2 后台数据是对象,嵌套数组 所以这里使用for...in
            for(let key in data){
                htmlStr += 
                `
                <tr data-id="${key}">
                <th scope="row">${key}</th>
                <td>${data[key].name}</td>
                <td class="score" data-batch="1">${data[key].score[0]}</td>
                <td class="score" data-batch="2">${data[key].score[1]}</td>
                <td class="score" data-batch="3">${data[key].score[2]}</td>
                <td class="score" data-batch="4">${data[key].score[3]}</td>
                <td class="score" data-batch="5">${data[key].score[4]}</td>
              </tr> 
                `
            }
            tbody.innerHTML = htmlStr
        })
    }
    init()

  // 2实现成绩的录入和修改
  tbody.addEventListener('click',function(e){
    // 2.1  判断当前点击单元格类名是否包含score（只需要类名score的数据）
    if(e.target.className === 'score'){
        //2.2 获取当前单元格数据
        let td = e.target
        // console.log(td);
        // 2.3 存储单元格的数值（后面赋值给input.value）
        let score = td.innerHTML
        // 2.4 判断当前单元格是否有input输入框
        if(!td.querySelector('input')){
            // 2.5 当前单元格html结构清空（每次点击先清空--不然会重复创建）
            td.innerHTML = ''
            // 2.6  创建 input输入框---添加类名---追加到td
            let input = document.createElement('input')
            input.classList.add('tdscore')
            td.appendChild(input)
            // 2.7 给input.value赋值td的数值
            input.value = score
            // 默认选中单元格 全选文字
            input.select()

            //2.8 失去焦点（没有修改） --- 没有按下确认键就恢复数值
            input.addEventListener('blur',function(){
                td.innerHTML = score
            })

            //2.9 输入框绑定一个keyup确认事件 
            input.addEventListener('keyup',function(e){
                // console.log(e.key)
                // 判断当前按键是否确认键
                if(e.key === 'Enter'){
                    // 2.1 获取当前单元格的id（父级委托）
                    let id = td.parentNode.dataset.id
                    // 2.2 获取当前单元格的第几次
                    let batch = td.dataset.batch
                    axios({
                        url:'/score/entry',
                        method:'POST',
                        data:{
                            stu_id:id,// 当前成绩所属学员的id
                            score:input.value,// 成绩，来自于输入框
                            batch:batch //第几次
                        }
                    })
                    .then(res=>{
                        // console.log(res);
                        // console.log(res.data.code);
                        // init()
                        // 修改一个数值 不需要真个重新渲染
                         toastr.success('修改成功')
                          // 2.3 先清空td的innerhtml结构
                          td.innerHTML = ''
                          // 2.4 在为td赋值（这个是用户修改后的值）
                          td.innerHTML = input.value
                          // 2.5 在将input移除
                          input.remove()
                    
                    })
                }
            })

        }
    }
  })

})